<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="() => {}"
      :searchParams="searchParams"
    >
      <el-table-column prop="orderNo" label="角色ID" />
      <el-table-column prop="parentProductName" label="角色名称" />
      <el-table-column prop="statusName" label="角色描述" />
      <el-table-column prop="statusName" label="最后修改时间" width="170" />
      <el-table-column prop="aa" label="状态" width="60">
        <template #default="scope">
          <isDisableStatus :status="scope.row.isDisable"></isDisableStatus>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="170">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handlePower(scope.row)"
            >授权</el-link
          >
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleDisable(scope.row)"
            >{{ scope.row.isDisable == 1 ? '启用' : '停用' }}</el-link
          >
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    ></EditForm>
    <HandleEmpower
      v-if="visibleHandleEmpower"
      v-model:dialogVisible="visibleHandleEmpower"
      :item="item"
    >
    </HandleEmpower>
  </div>
</template>

<script setup lang="ts">
import HandleEmpower from './handleEmpower.vue'
import EditForm from './EditForm.vue'
import BaseTable from '@/components/base-table.vue'
import openMsgBox from '@/hooks/messageBox.js'

const formItems = ref([
  {
    name: '角色名称',
    key: 'planCateId',
    type: 'input',
  },
  {
    name: '状态',
    key: 'planCateId',
    clearable: true,
    type: 'select',
    options: [],
  },
])
const searchParams = ref({
  planCateId: '',
  schemeId: '',
  date: '',
})
const baseTable = ref(null)
const handleSearch = () => {
  baseTable.value.handleSearch(searchParams.value)
}
const item = ref({})
const visibleEditForm = ref(false)
const handleEdit = (row) => {
  item.value = { ...row }
  visibleEditForm.value = true
}
const visibleHandleEmpower = ref(false)
const handlePower = (row) => {
  item.value = { ...row }
  console.log(row)
  visibleHandleEmpower.value = true
}

const handleDel = (row) => {
  openMsgBox({ title: '确认提示', tips: '确定要删除吗' }, () => {})
}
const handleDisable = (row) => {
  openMsgBox(
    {
      title: '确认提示',
      tips: `是否确定${row.isDisable == 1 ? '启用' : '停用'}`,
    },
    () => {}
  )
}
</script>

<style lang="less" scoped></style>
